// 密码登录组件
// src/pages/login/widgets/password/index.tsx
import styles from "@styles/login.module.scss";
import { EyeFill, EyeInvisibleFill } from "antd-mobile-icons";
import classNames from "classnames";
import useToggle from "@hooks/useToggle";
import { useEffect } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Toast } from "antd-mobile";

// 表单状态类型
interface FormState {
    password: string;
    mobile: string;
    isAgree: boolean;
}
// 模式验证器
const schema = z.object({
    mobile: z
        .string({
            invalid_type_error: "手机号参数类型错误",
            required_error: "请检查手机号字段名称是否正确",
        })
        .min(1, "请输入手机号")
        .regex(/^1[3-9]\d{9}$/, "手机号格式错误"),
    password: z
        .string({
            invalid_type_error: "密码参数类型错误",
            required_error: "请检查密码字段名称是否正确",
        })
        .regex(/^\w{6,24}$/, "密码需要6~24个字符"),
    isAgree: z.literal(true, {
        errorMap: () => ({ message: "请勾选协议" }),
    }),
});
export default function Password() {
    // 表单验证对象
    const {
        register,
        handleSubmit,
        formState: { errors, isValid },
    } = useForm<FormState>({
        // 在用户输入的过程中实时触发验证
        mode: "onChange",
        // 状态默认值
        defaultValues: { password: "", mobile: "", isAgree: false },
        // 设置表单验证器
        resolver: zodResolver(schema),
    });

    useEffect(() => {
        if (typeof errors.isAgree !== "undefined") {
            Toast.show({ content: "请勾选我已同意" });
        }
    }, [errors.isAgree]);

    // 表单提交
    const onSubmit: SubmitHandler<FormState> = (formState) => {
        console.log(formState);
    };

    // 控制密码是否显示
    const [visible, setVisible] = useToggle(false);
    // 渲染视图
    return (
        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
            <div className={styles.formItem}>
                <input {...register("mobile")}  type="text" placeholder="请输入手机号" className={styles.text} />
                {errors.mobile && <p className={styles.msg}>{errors.mobile.message}</p>}
            </div>
            <div className={styles.formItem}>
                <input
                    {...register("password")}
                    type={visible ? "text" : "password"}
                    placeholder="请输入密码"
                    className={styles.text}
                />
                <div className={styles.right} onClick={setVisible}>
                    {visible ? <EyeFill /> : <EyeInvisibleFill />}
                </div>
                {errors.password && <p className={styles.msg}>{errors.password.message}</p>}
            </div>
            <div className={styles.formItem}>
                <label className={styles.agree}>
                    <input type="checkbox" {...register("isAgree")} />
                    <span>
            我已同意<a href="#"> 用户协议 </a>及<a href="#"> 隐私条款</a>
          </span>
                </label>
            </div>
            <button className={classNames(styles.submit, { [styles.disabled]: !isValid })}>登录</button>
        </form>
    );
}